<template>
  <BaseMainSlot>
    <template v-slot:content>
      <div class="farm-main">
        <div class="tr-sid">
          <div class="sid-head">选择鱼塘</div>
          <div class="sid-tree">
            <treeSide @treeselectvalue="treeselectvalue" />
          </div>
        </div>
        <div v-loading="loading" element-loading-text="预热中，请耐心等待哦亲！" class="cameraview-box">
          <iframe v-if="showFace === 'play' && isShowCamera" :src="nowcameraurl"
            style="width: 100%; height: 100%"></iframe>
          <div v-if="!isShowCamera" class="carame-mask">
            <span>长时间无操作,摄像头已断开连接...</span>
            <el-button type="primary" @click="reload()">点击重连</el-button>
          </div>
          <div v-show="showFace === 'notCameraList'"
            style=" width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
            <h1>正在连接...</h1>
          </div>
          <div v-show="showFace === 'downFlow'"
            style="width: 100%;  height: 100%; display: flex; justify-content: center; align-items: center; ">
            <h1>流量不足</h1>
          </div>
          <div v-show="showFace === 'transCamera'"
            style=" width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; "></div>
          <div v-show="showFace === 'notCameraData'"
            style=" width: 100%;  height: 100%; display: flex; justify-content: center;align-items: center;">
            <h1>未取得该摄像头数据</h1>
          </div>
        </div>
        <div class="cameralist-box">
          <zhcameralist ref="cameraRef" :cameralistparam="paramslist" @nowcameraurl="getcamerurl"
            @getUploadTime="handleLoading" />
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>
<script>
import treeSide from "@/components/selectbutton/trelist.vue";
import zhcameralist from "./component/cameralist.vue";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
export default {
  name: "VideoSurveillance",
  components: { treeSide, BaseMainSlot, zhcameralist },
  data () {
    return {
      loading: true,
      // 表格选中id
      tableselectidlist: "",
      // 当前选中地块组名或地亏啊名
      facilityName: "",
      // 当前选中cameraindex
      nowcameraindex: "",
      addcameraVisible: false,
      paramslist: {},
      cameralist: [],
      // 当前视频播放地址
      nowcameraurl: "",
      testUser: null,
      // 是否展示视频窗口
      showFace: "transCamera",
      isShowCamera: true,
    };
  },
  watch: {},
  mounted () {
    this.reload();
  },
  beforeDestroy () {
    clearInterval(this.testUser);
  },
  methods: {
    reload () {
      clearInterval(this.testUser);
      this.userIsLeave()
    },
    userIsLeave (time) {
      var that = this;
      var time = time || 60;
      var userTime = time * 1; //6秒后强制返回
      var objTime = {
        init: 0,
        time: function () {
          objTime.init += 1;
          if (objTime.init == userTime) {
            that.isShowCamera = false;
            console.log("离线中..."); // 用户到达未操作事件 做一些处理 //时间到达后要做的事情，写在这里
          }
        },
        eventFun: function () {
          clearInterval(that.testUser);
          objTime.init = 0;
          that.testUser = setInterval(objTime.time, 1000);
        },
      };
      var body = document.querySelector("html"); //获取html元素
      clearInterval(that.testUser);
      that.testUser = setInterval(objTime.time, 1000);
      body.addEventListener("click", objTime.eventFun); //增加点击时间
      body.addEventListener("keydown", objTime.eventFun); //增加键盘事件
      body.addEventListener("mousemove", objTime.eventFun); //增加鼠标移动事件
      body.addEventListener("mousewheel", objTime.eventFun); //增加鼠标滑轮滑动事件
      that.isShowCamera = true;
      console.log('开始播放...')
    },
    getcamerurl (e) {
      // 不存在地址 不展示摄像头
      console.log(e);
      this.reload();
      if (e === "transCamera") {
        // 切换摄像头
        this.showFace = "transCamera";
        this.loading = false;
        return;
      } else if (e === "downFlow") {
        // 流量不足无法播放
        this.showFace = "downFlow";
        this.loading = false;
        return;
      } else if (e === "notCameraData") {
        // 未获取到该摄像头数据
        this.showFace = "notCameraData";
        this.loading = false;
        return;
      } else if (e === "notCameraList") {
        // 暂无摄像头
        this.showFace = "notCameraList";
        this.loading = false;
        return;
      }
      this.nowcameraurl = e;
      setTimeout(() => {
        this.showFace = "play";
      }, 200);
    },
    // 点击树状触发方法
    treeselectvalue (e) {
      this.paramslist = {
        fishPondId: e,
      };
      this.addActive = true;
    },
    // 点击相机，获取相机数据，拼接完整video路径
    clickcamerames (e) {
      let nowcamerid = e.cameraid;
      console.log(nowcamerid);
    },
    // 参数1：时长 参数2：是否预热
    handleLoading () {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-select .el-input__inner {
  color: #272929 !important;
}

::v-deep {
  .zhcontent {
    overflow: hidden !important;
  }
}

.carame-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  width: 100%;
  height: 100%;
}

.farm-main {
  width: 100%;
  height: calc(100%);
  // height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .cameraview-box {
    position: relative;
    width: calc(70% - 90px);
    height: 100%;
    margin: 0 15px;
    border: 8px double #fff;
    background-color: #363839;

    .iframeShade {
      position: absolute;
      width: 100%;
      height: 100%;
      background: red;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }

  .tr-sid {
    width: 240px;
    // margin-left: 10px;
    // margin-right: 5px;
    height: 100%;
    padding: 0 10px 10px;
    background-color: #fff;

    .sid-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }

    .sid-tree {
      width: 100%;
      height: calc(100% - 40px);
    }
  }

  .cameralist-box {
    width: calc(20% - 20px);
    min-width: 320px;
    height: 100%;
  }
}
</style>
